<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script> -->
    <script src="../source/node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
    <div id="app"></div>
    <script>
       

        const { createApp, reactive,onMounted,h,onBeforeMount,onBeforeUpdate,onUpdated,getCurrentInstance } = VueRuntimeDOM; // VueRuntimeCore
        let App = {
            beforeCreate(){
                console.log('beforeCreate');
            },
            created(){
                console.log('created');
            },
            setup() {
                const state1 = getCurrentInstance()
                    console.log('setup',state1);
                onBeforeMount(() => {
                   
                    console.log('挂载前');
                })
                onMounted(() => { 
                    const state = getCurrentInstance()

                    console.log('挂载完成',state,state === state1);
                })
                onBeforeUpdate(() => {
                    console.log('更新前');
                })
                onUpdated(() => {
                    console.log('更新后');
                })

                return () => {
                    return h('h1','xxx')
                }
            }
        }
        let app = createApp(App); // rootProps

        app.mount('#app')
    </script>
</body>

</html>